<!--
 * @LastEditTime : 2022-11-03 15:51:45
 * @FilePath     : /pyy/src/views/equipment/add/components/detailed.vue
 * @Description  : 设备计量 > 设备计量校准 > 明细表
-->

<template>
  <div class="detailed">
    <div class="contanier">
      <van-field
      class="mandatory"
        autosize
        rows="1"
        type="textarea"
        name="bclsbmc"
        label="被测量设备名称"
        label-width="max-content"
        :rules="[{ required: true, message: '不能为空' }]"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.bclsbmc"
      />
      <van-field
        name="bh"
        label="编号"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.bh"
      />
      <van-field
        name="xhgg"
        label="型号规格"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.xhgg"
      />
      <popup-select
        name="lb"
        label="类别"
        placeholder="请选择"
        :selectLabel='form.lb'
        :options="categoryOptions"     
        :default-props="{
          label: 'name',
          value: 'id',
          
        }"
        v-model="form.lb"
      />
      <van-field
      class="mandatory"
        type="number"
        name="ypsl"
        label="数量"
        placeholder="请填写数字"
        :rules="[{ required: true, message: '不能为空' }]"
        autocomplete="off"
        v-model="form.ypsl"
      />
      <van-field
        autosize
        rows="1"
        type="textarea"
        name="cldmc"
        label="测量点名称"
        label-width="max-content"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.cldmc"
      />
      <van-field
        autosize
        rows="1"
        type="textarea"
        name="zsdw"
        class="mandatory"
        :rules="[{ required: true, message: '不能为空' }]"
        label="证书单位"
        label-width="max-content"
        placeholder="请填写"
        autocomplete="off"
        v-model="form.zsdw"
      />
      <van-field name="sfxtz " label="是否需要调整">
        <template #input>
          <van-radio-group direction="horizontal" v-model="form.sfxtz">
            <van-row type="flex" justify="space-between">
              <van-col v-for="item in whetherOptions" :key="item.id">
                <radio-circle :name="item.id" icon-size="16px">
                  {{ item.name }}
                </radio-circle>
              </van-col>
            </van-row>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="sfxwx " label="是否需要修理">
        <template #input>
          <van-radio-group direction="horizontal" v-model="form.sfxwx">
            <van-row type="flex" justify="space-between">
              <van-col v-for="item in whetherOptions" :key="item.id">
                <radio-circle :name="item.id" icon-size="16px">
                  {{ item.name }}
                </radio-circle>
              </van-col>
            </van-row>
          </van-radio-group>
        </template>
      </van-field>
      <van-field name="sfxfy " label="是否需要封印">
        <template #input>
          <van-radio-group direction="horizontal" v-model="form.sfxfy">
            <van-row type="flex" justify="space-between">
              <van-col v-for="item in whetherOptions" :key="item.id">
                <radio-circle :name="item.id" icon-size="16px">
                  {{ item.name }}
                </radio-circle>
              </van-col>
            </van-row>
          </van-radio-group>
        </template>
      </van-field>
      <!-- <van-field name="isUrgent " label="是否需要加急">
        <template #input>
          <van-radio-group direction="horizontal" v-model="form.isUrgent">
            <van-row type="flex" justify="space-between">
              <van-col v-for="item in whetherOptions" :key="item.id">
                <radio-circle :name="item.id" icon-size="16px">
                  {{ item.name }}
                </radio-circle>
              </van-col>
            </van-row>
          </van-radio-group>
        </template>
      </van-field> -->
    </div>
    <div class="footer addCopy" >
      <van-button
        class="btn-delete"
        inline-block
        type="default"
        icon="delete-o"      
        @click.stop.prevent="handleDelete"
      >
        删除
      </van-button>
      <van-button
        inline-block
          type="default"
          class="btn-add-detailed"
          icon="description"
          native-type="button"
          @click.stop.prevent="handleAddCopy"
        >
          复制
        </van-button>
    </div>
    <!-- <div class="footer">
      <van-button
        class="btn-delete"
        block
        type="default"
        icon="delete-o"
        v-if="showDelete"
        @click="handleDelete"
      >
        删除
      </van-button>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "Detailed",
  components: {},
  props: {
    importDataIs:{
      type:String
    },
    isOrNo:{
      type:Array
    },
    index: {
      type: Number,
      require: true,
      default: 0,
    },
    // 类别
    categoryOptions: {
      type: Array,
      require: true,
      default: () => [],
    },
    // 是否显示 删除按钮
    showDelete: {
      type: Boolean,
      require: true,
      default: false,
    },
    // 表单录入数据
    form: {
      require: true,
      type: Object,
      default: () => ({
        bclsbmc: "",
        bh: "",
        xhgg: "",
        lb: "",
        ypsl: "",
        cldmc: "",
        zsdw: "",
        sfxtz: "",
        sfxwx: "",
        sfxfy: "",
        // isUrgent: "",
      }),
    },
  },
  data() {
    return {
      // 明细表是否制样
      whetherOptions: [
        
      ],
    };
  },
  mounted() {
    const defaultSelect = this.whetherOptions[0];
    this.whetherOptions = this.isOrNo
    const defaulisOrNo = this.isOrNo[0];
    // this.form.samplePreparation = defaultSelect.id;
    // 判断是导入数据还是 新增明细 
    if(this.importDataIs == '1' || this.importDataIs == '2'){
      return
    }else{
      this.form.sfxtz = defaulisOrNo.id;
      this.form.sfxwx = defaulisOrNo.id;
      this.form.sfxfy = defaulisOrNo.id;
    }
   

    // this.form.isUrgent = defaultSelect.id;
  },
  methods: {
    /**
     * 点击 删除
     */
    handleDelete() {
      this.$emit("delete", this.index);
    },
    /**
     * 点击 复制当前
     */
     handleAddCopy() {
      console.log('this.index :>> ', this.index);

      this.$emit("copy", this.index);
    },
    /**
     * 是否为空
     * @param {any} value: 需要进行验证的数据
     * @return {boolean}
     */
    isNull(value) {
      return [null, undefined, ""].includes(value);
    },
  },
};
</script>

<style lang="less" scoped>
  .addCopy{
  display: flex;
    justify-content: space-evenly;
    background-color: #fff;
}
.detailed {
  width: 100%;
  height: max-content;
  font-family: "Inter";
  font-style: normal;
  font-size: 16px;
  line-height: 19px;
  margin-top: 8px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 0 12px;
  .mandatory{
            position: relative;
            &::after{
                content: '*';
                display: block;
                position: absolute;
                left: 5px;
                top: 14px;
                font-size: 16px;
                color: red;
                transform: scale(1);

            }
        }
  .footer {
    .btn-delete {
      color: #ee0a24;
      border: none;
    }
  }
}
</style>
